<template>
	<view class="content">
		<map id="map" :latitude="latitude" :longitude="longitude" :show-location="true" :scale="scale"
			:markers="markers" style="width: 100%;height:100vh;" @markertap='gomark' :min-scale="17">
			<!-- 定位 -->
			<view v-if="types==null" class="abs flex_between flex_items" style="width:700rpx;left: 20rpx;bottom: 20%;">
				<view style="background: #fff;border-radius: 50%;" class="p20 flex_items flex_center"
					@click="getAuthorize">
					<image :src="localimg" mode="widthFix" style="width: 42rpx;height: 42rpx"></image>
				</view>
				<view style="opacity: 0;">占位</view>
				<view style="opacity: 0;">占位</view>
			</view>
			<view v-if="istart" class="flex_column abs"
				style="bottom:2%;width:90%;left:5%;z-index: 10;background: #FFFFFF;box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);border-radius: 16rpx;padding: 4%;">
				<view class="lj_lx">
					<view class="title">{{parkList.RouteName}}</view>
					<view class="textCar">
						<text>{{list.length}}个景点</text>
						<text>{{parkList.TimeConsuming}}小时</text>
						<text>{{parkList.Distance}}公里</text>
					</view>
					<view class="lj_btn" @click="gomark">
						<view class="">开始游览</view>
					</view>
				</view>
			</view>
		</map>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		GetBanners,
		GetArticledetail,
	} from '@/api/api.js';
	import Config from "@/config"
	export default {
		data() {
			return {
				latitude: "30.509148",
				longitude: "103.618286",
				scale: 18,
				markers: [], //坐标点
				travelinfo: '',
				playimg: "",
				localimg: "",
				list: [],
				tomark: {}, //点击的坐标
				istart: true,
				parkList: '',
				points: '',
				chese: 'CN',
				isIOS: false,
			}
		},
		onLoad(options) {
			this.list = JSON.parse(options.type)
			this.parkList = JSON.parse(options.data)
			this.chese = options.chese;
			this.getmap();
			this.Getdata();
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		created() {
			if (uni.getSystemInfoSync().platform == 'ios' || uni.getSystemInfoSync().platform == 'devtools') {
				this.isIOS = true
			} else {
				this.isIOS = false
			}
		},
		methods: {
			Getdata() {
				let that = this
				GetBanners({
					ParentId: that.$category.api.travelTag,
					layers: 2
				}).then(res => {
					res.Data.forEach(con => {
						if (con.Name == "景点") {
							console.log(con)
							that.points = con.Children;
							console.log(that.points)
							console.log(that.list)
							that.points.forEach(res => {
								that.list.forEach(e => {
									if (res.Name == e.Title) {
										e.Lat = res.CenterPoint.split(',')[0]
										e.Lng = res.CenterPoint.split(',')[1]
									}
								})
							})
							that.getMarks();
						}
					})
				})
			},
			godetail() {
				uni.navigateTo({
					url: '../../guide_subpages/pointdetail/index?Id=' + this.travelinfo.Id + "&title=" + this
						.travelinfo.Title + "&room=1"
				})
			},
			getMarks() {
				let arr = [];
				for (let i = 0; i < this.list.length; i++) {
					let points = arr.push({
						latitude: this.list[i].Lat,
						longitude: this.list[i].Lng,
					});
					this.markers.push({
						ids: this.list[i].ArticleId,
						id: i, //点击事件会调用此id,建议不同点设置不同id
						// title: this.points[this.curindex].Children[i].Name, //标记点的名称
						latitude: this.list[i].Lat, //纬度
						longitude: this.list[i].Lng, //经度
						iconPath: this.list[i].IconImg, //图标样式路径,用绝对路径,不要写前面的../
						width: 25, //图标宽度
						height: 70, //图标高度
						callout:{
							content:i+1,
							display:'ALWAYS',
							anchorY:65,
							bgColor:'transparent',
							fontSize: 10,
							color:'#498FFF',
						},
						label: {
							content: this.list[i].Title,
							textAlign: 'center',
							display: "ALWAYS",
							anchorY: -5,
							anchorX: this.isIOS ? 0 : -(0.5 * (this.list[i].Title.length * 7)),
							fontSize: 7,
							borderRadius: '20',
							padding: 2,
							bgColor: '#498FFF',
							color: "#FFFFFF"
						},
					})
				}
			},
			// map
			getmap() {
				// uni.showLoading({
				// 	title: "加载中..."
				// })
				let mapCtx = uni.createMapContext('map', this);
				console.log(mapCtx)
				mapCtx.addGroundOverlay({
					id: 0,
					src: Config.imgUrl +"/Content/images/AnRenHand.png",
					bounds: {
						southwest: { // 西南角
							latitude: 30.507572,
							longitude: 103.616677,
						},
						northeast: { //东北角
							latitude: 30.511102,
							longitude: 103.619502,
						}
					},
					success(res) {
						console.log('wp', res)
					},
					fail(err) {
						console.log('wperr', err)
					}
				})
			},
			gomark(e) {
				let i = e.detail.markerId;
				if(e.detail.markerId==undefined){
					i = 0;
				}
				let type = JSON.stringify(this.list)
				uni.navigateTo({
					url: '/pages/YangquanTour/tourStart?type=' + type + '&chese=' + this.chese + '&indexID=' + i
				})
			},
			getmarkdetail(Id) {
				GetArticledetail({
					Id: Id
				}).then(res => {
					this.travelinfo = res.Data;
					console.log(this.travelinfo)
				})
			},
			golocal() {
				let that = this
				uni.openLocation({
					latitude: Number(that.travelinfo.Lat), //目标纬度
					longitude: Number(that.travelinfo.Lng), //目标经度
					name: that.travelinfo.Title, //名称
					scale: 28
				});
			},
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							// resolve(); // 允许授权
							this.getLocationInfo()
						},
						fail: () => {
							// reject(); // 拒绝授权
							this.openConfirm()
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.markers = [{
							id: "",
							latitude: res.latitude,
							longitude: res.longitude,
							width: that.markerHeight, //宽
							height: that.markerHeight, //高
						}, ];
					},
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									if (res[1].authSetting[
											"scope.userLocation"] ===
										true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "你拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		min-height: 100vh;
	}

	.chose {
		background: #498FFF;
		border-radius: 4rpx;
		color: #fff;
	}

	.nochose {
		background: #fff;
		color: #1A1A1A;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.sheng {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 4;
	}

	#share::after {
		border: none !important;
	}

	.chose2 {
		color: #B3291F;
	}

	button::after {
		display: none;
	}

	.luxian_box {
		width: 280rpx;
		height: 250rpx;
		position: fixed;
		bottom: 14%;
		left: 52%;
		margin-left: -140rpx;
		z-index: 9;
	}

	.luxian_box image {
		width: 100%;
		height: 100%;
	}

	/deep/ .u-icon--right {
		position: absolute;
		left: 0;
	}

	.lj_lx {
		color: #000;
		position: relative;

		.title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.textCar {
			font-size: 24rpx;
			margin-top: 6%;

			text {
				margin-right: 2%;
			}
		}

		.lj_btn {
			box-shadow: 0 0 5px #498FFF inset;
			color: #498FFF;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			position: absolute;
			border: 1px solid #498FFF;
			right: 2%;
			top: 2%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>